<template>
	<section class="departmentStaff">
		<!--start  面包屑-->
		<div class="location">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item :to="{path:'/index'}">首页</el-breadcrumb-item>
				<el-breadcrumb-item>设置</el-breadcrumb-item>
				<el-breadcrumb-item>部门与员工</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<!--end  面包屑-->
		<!--start content-->
		<div class="content" ref="departmentWrap">
			<!--start 新增部门下拉-->
			<div class="add">
				<transition name="fade">
					<div class="modal-backdrop" v-show="add"></div>
				</transition>
				<transition name="slideDown">
					<div class="specific-search" v-show="add">
						<div class="search-title">
							<p>新增部门</p>
						</div>
						<div class="form">
							<el-row>
								<el-col :span="11">
									<el-form :model="addForm" :rules="rules" ref="addDepartment" label-width="100px">
										<el-form-item label="部门名称" prop="department">
											<el-input v-model="addForm.department"></el-input>
										</el-form-item>
										<el-form-item label="上级部门" prop="parentDepartment">
											<el-select :disabled="addForm.disabled" v-model="addForm.parentDepartment" :placeholder="addForm.placeholder">
											</el-select>
										</el-form-item>
										<el-form-item>
											<el-button type="primary" @click="addOk(categoryParentCode)">确定</el-button>
											<el-button @click="addCancel">取消</el-button>
										</el-form-item>
									</el-form>
								</el-col>
							</el-row>
						</div>
					</div>
				</transition>
			</div>
			<!--end 新增部门下拉-->
			<!--start 修改部门下拉-->
			<div class="add">
				<transition name="fade">
					<div class="modal-backdrop" v-show="update"></div>
				</transition>
				<transition name="slideDown">
					<div class="specific-search" v-show="update">
						<div class="search-title">
							<p>修改部门</p>
						</div>
						<div class="form">
							<el-row>
								<el-col :span="11">
									<el-form :model="updateForm" :rules="rules" ref="updateDepartment" label-width="100px">
										<el-form-item label="部门名称" prop="department">
											<el-input v-model="updateForm.department"></el-input>
										</el-form-item>
										<el-form-item label="上级部门" prop="parentDepartment">
											<el-select :disabled="updateForm.disabled" v-model="updateForm.parentDepartment" :placeholder="updateForm.placeholder">
											</el-select>
										</el-form-item>
										<el-form-item>
											<el-button type="primary" @click="updateOk(deptCode)">确定</el-button>
											<el-button @click="updateCancel">取消</el-button>
										</el-form-item>
									</el-form>
								</el-col>
							</el-row>
						</div>
					</div>
				</transition>
			</div>
			<!--end 修改部门下拉-->

			<!--修改角色名称  start-->
			<div class="height-search">
				<transition name="fade">
					<div class="modal-backdrop" v-show="modify"></div>
				</transition>
				<transition name="slideDown">
					<div class="height-s-con" v-show="modify">
						<p class="search-title">修改角色名称</p>
						<el-form ref="modifyFormData" :rules="rules1" :model="modifyFormData" label-width="110px">
							<el-form-item label="角色名称" prop="accountNum">
								<el-input class="wInput" v-model="modifyFormData.accountNum"></el-input>
							</el-form-item>
							<el-form-item label-width="15px">
								<el-button @click="modifySure" type="primary">确定</el-button>
								<el-button @click="modifyCancel">取消</el-button>
							</el-form-item>
						</el-form>
					</div>
				</transition>
			</div>
			<!--修改角色名称  end-->

			<el-tabs v-model="activeName" class="contentWrap">
				<!-------------------------------------------员工账号  start--------------------------------------------------------------->
				<el-tab-pane label="员工账号" name="first">
					<div class="employNum-heard">
						<!--<div class="slideBtn fl" @click.stop="departmentType">
							<el-dropdown menu-align="start" trigger="click" @command="handleCommand">
								<span class="el-dropdown-link">
							    {{slideBtnMsg}}<i :class="{up:allOrder}" class="el-icon-arrow-down el-icon--right slideBtnIcon"></i>
							  </span>
								<el-dropdown-menu slot="dropdown">
									<el-dropdown-item command="全部部门">全部部门</el-dropdown-item>
									<el-dropdown-item command="研发部">研发部</el-dropdown-item>
								</el-dropdown-menu>
							</el-dropdown>
						</div>-->

						<div class="slideBtn fl" @click.stop="stateType">
							<el-dropdown menu-align="start" trigger="click" @command="handleCommandState">
								<span class="el-dropdown-link">
							    {{slideBtnMsgState}}<i :class="{up:allState}"
                                         class="el-icon-arrow-down el-icon--right slideBtnIcon"></i>
							  </span>
								<el-dropdown-menu slot="dropdown">
									<el-dropdown-item command="全部状态">全部状态</el-dropdown-item>
									<el-dropdown-item command="启用">启用</el-dropdown-item>
									<el-dropdown-item command="停用">停用</el-dropdown-item>
								</el-dropdown-menu>
							</el-dropdown>
						</div>
						<div class="public-left clearfix fl">
							<div class="goods-input">
								<input type="text" placeholder="请输入员工姓名/账号/手机" v-model="fullTextFields" @keydown.enter="iconQuery" /><i @click="iconQuery"></i>
							</div>
						</div>
						<el-button class="fr" type="primary" @click="addNewAccount()">新增账号</el-button>
					</div>
					<el-table :data="tableData" :row-class-name="disableStateBtn" :max-height="tableH" style="width: 100%">
						<el-table-column prop="operatorAccount" label="用户名" mix-width="190">
							<template scope="scope"><span class="goTo" @click="modifyBtn(scope.$index, tableData)">{{ scope.row.operatorAccount}}</span>
							</template>
						</el-table-column>
						<el-table-column prop="operatorName" label="姓名" mix-width="140">
						</el-table-column>
						<el-table-column prop="operatorPosition" label="职位" mix-width="150">
						</el-table-column>
						<el-table-column prop="deptName" label="部门" mix-width="150">
						</el-table-column>
						<el-table-column prop="operatorPhone" label="手机" mix-width="140">
						</el-table-column>
						<el-table-column prop="operatorEmail" label="邮箱">
						</el-table-column>
						<el-table-column prop="dataBillstateStr" label="状态" mix-width="100">
						</el-table-column>
						<el-table-column fixed="right" label="" width="60">
							<template scope="scope">
								<el-popover trigger="hover" class="rightR" placement="left-start">
									<p class="p" @click="modifyBtn(scope.$index, tableData)"><em class="iconfont" style="font-size: 15px">&#xe61e;</em>修改</p>
									<p class="p" @click="ableBtn(scope.$index, tableData)" v-if="tableData[scope.$index].dataBillstate==1">
										<em class="iconfont" style="font-size: 17px">&#xe6f1;</em>启用
									</p>
									<p class="p" @click="disableBtn(scope.$index, tableData)" v-if="tableData[scope.$index].dataBillstate==0">
										<em class="iconfont" style="font-size: 17px">&#xe63a;</em>停用
									</p>
									<p class="p" @click="delBtn(scope.$index, tableData)" v-if="tableData[scope.$index].dataBillstate==1">
										<em class="iconfont" style="font-size: 17px">&#xe616;</em>作废</p>
									<div slot="reference" class="name-wrapper">
										<el-tag><em class="iconfont tab-hover">&#xe607;</em></el-tag>
									</div>
								</el-popover>
							</template>
						</el-table-column>
					</el-table>
					<!--分页  start-->
					<div class="block">
						<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="parseInt(yema)" :page-sizes="[10, 20, 50,100,500]" :page-size="parseInt(yetiao)" layout="total, prev, pager, next, sizes,jumper" :total="parseInt(tiaosum)">
						</el-pagination>
					</div>
					<!--分页  end-->
				</el-tab-pane>
				<!-------------------------------------------部门设置  start--------------------------------------------------------------->
				<el-tab-pane label="部门设置" name="second">
					<el-row type="flex" class="row-bg" justify="space-between" style="border-bottom: 1px solid #e6ecf2;">
						<el-col :span="1">
							<div class="grid-content bg-purple"></div>
						</el-col>
						<el-col :span="2">
							<div class="grid-content bg-purple textR">
								<el-button type="primary" @click="addDep">新增部门</el-button>
							</div>
						</el-col>
					</el-row>
					<!--部门列表  start-->
					<div class="noBorder borderBottom">
						<el-tree :expand-on-click-node="false" :data="tree" :props="defaultProps" node-key="treeCode" ref="tree" :default-expanded-keys="expandTreeKeys" @node-expand="addKey" @node-collapse="deleteKey" :render-content="treeConentFn">
						</el-tree>
					</div>
					<!--部门列表  end-->
				</el-tab-pane>
				<!-------------------------------------------角色权限设置  start----------------------------------------------------------->
				<el-tab-pane label="角色权限设置" name="third" class="jurisdictionWrap">
					<el-form ref="form" :model="roleSetFromData" label-width="80px">
						<el-row :gutter="20">
							<el-col :span="24">
								<div class="title">角色权限管理</div>
							</el-col>
						</el-row>
						<el-row :gutter="20">
							<el-col :span="6">
								<el-form-item label="选择角色" prop="role">
									<el-select v-model="roleSetFromData.role" placeholder="请选择" @change="memberRoleFn">
										<el-option v-for="(item,index) in memberRole" :label="item.roleName" :value="item.roleCode"></el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :span="4">
								<el-form-item class="modifyRole">
									<span class="modifyHover" @click="modify=true"><em class="iconfont">&#xe617;</em>修改角色名称</span>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row style="margin-bottom:20px">
							<el-col :span="12" :offset="1">
								<p class="sayTips">说明:</p>
								<p class="sayTips">1、具备该角色的用户登录后显示操作员工作台；</p>
								<p class="sayTips">2、修改角色权限后，所有赋予此角色的员工账号对应权限均将修改；</p>
								<p class="sayTips">3、系统管理员角色不允许改名，也不允许修改其操作权限；</p>
								<p class="sayTips">
									4、"禁止查看商品价格与订单金额"的权限不得和【订单修改、订/退单审核、财务审核、代下订/退单、订单商品统计查看、订单商品统计导出、商品管理、商品删除、商品导出、促销管理以及资金所有权限、报表所有权限】同时勾选。</p>
							</el-col>
						</el-row>
						<el-row :gutter="20">
							<el-col :span="24">
								<span class="tipsLeft">角色权限明细</span>
							</el-col>
						</el-row>
						<table class="addAccount" cellpadding="0" cellspacing="0">
							<tr>
								<td>订单</td>
								<td>
									<el-form-item prop="type" label="">
										<el-checkbox-group v-model="companyMsgData.type">
											<el-checkbox class="tableCheckbox" label="订单查看" name="type"></el-checkbox>
											<el-checkbox class="tableCheckbox" label="订单导出" name="type"></el-checkbox>
											<el-checkbox class="tableCheckbox" label="订单审核" name="type"></el-checkbox>
											<el-checkbox class="tableCheckbox" label="订单修改" name="type"></el-checkbox>
											<el-checkbox class="tableCheckbox" label="订单作废" name="type"></el-checkbox>
											<el-checkbox class="tableCheckbox" label="订单删除" name="type"></el-checkbox>
											<el-checkbox class="tableCheckbox" label="财务审核" name="type"></el-checkbox>
											<el-checkbox class="tableCheckbox" label="出库审核" name="type"></el-checkbox>
											<el-checkbox class="tableCheckbox" label="订单发货确认" name="type"></el-checkbox>
											<el-checkbox class="tableCheckbox" label="订单退回" name="type"></el-checkbox>
											<el-checkbox class="tableCheckbox" label="代下订单" name="type"></el-checkbox>
											<el-checkbox class="tableCheckbox" label="退单查看" name="type"></el-checkbox>
											<el-checkbox class="tableCheckbox" label="退单导出" name="type"></el-checkbox>
											<el-checkbox class="tableCheckbox" label="退单审核" name="type"></el-checkbox>
											<el-checkbox class="tableCheckbox" label="退单作废" name="type"></el-checkbox>
											<el-checkbox class="tableCheckbox" label="退单删除" name="type"></el-checkbox>
											<el-checkbox class="tableCheckbox" label="退单确认" name="type"></el-checkbox>
											<el-checkbox class="tableCheckbox" label="退单收货确认" name="type"></el-checkbox>
											<el-checkbox class="tableCheckbox" label="退单瑞惠" name="type"></el-checkbox>
											<el-checkbox class="tableCheckbox" label="代下退单" name="type"></el-checkbox>
											<el-checkbox class="tableCheckbox" label="出库/发货记录" name="type"></el-checkbox>
											<el-checkbox class="tableCheckbox" label="订单商品统计查看" name="type"></el-checkbox>
											<el-checkbox class="tableCheckbox" label="订单商品统计导出" name="type"></el-checkbox>
											<el-checkbox class="tableCheckbox" label="发货统计查看" name="type"></el-checkbox>
											<el-checkbox class="tableCheckbox" label="发货统计导出" name="type"></el-checkbox>
										</el-checkbox-group>
									</el-form-item>
								</td>
							</tr>
							<tr>
								<td>商品</td>
								<td>
									<el-form-item prop="type" label="">
										<el-checkbox-group v-model="companyMsgData.type">
											<el-checkbox class="tableCheckbox" label="商品查看" name="type"></el-checkbox>
											<el-checkbox class="tableCheckbox" label="商品导出" name="type"></el-checkbox>
											<el-checkbox class="tableCheckbox" label="商品管理" name="type"></el-checkbox>
											<el-checkbox class="tableCheckbox" label="商品删除" name="type"></el-checkbox>
											<el-checkbox class="tableCheckbox" label="商品类别管理" name="type"></el-checkbox>
											<el-checkbox class="tableCheckbox" label="库存管理" name="type"></el-checkbox>
											<el-checkbox class="tableCheckbox" label="供应商查看" name="type"></el-checkbox>
											<el-checkbox class="tableCheckbox" label="供应商管理" name="type"></el-checkbox>
											<el-checkbox class="tableCheckbox" label="采购订单管理" name="type"></el-checkbox>
											<el-checkbox class="tableCheckbox" label="智能采购" name="type"></el-checkbox>
											<el-checkbox class="tableCheckbox" label="采购订单导出" name="type"></el-checkbox>
											<el-checkbox class="tableCheckbox" label="商品收发存汇总查看" name="type"></el-checkbox>
											<el-checkbox class="tableCheckbox" label="库存成本管理" name="type"></el-checkbox>
											<el-checkbox class="tableCheckbox" label="促销查看" name="type"></el-checkbox>
											<el-checkbox class="tableCheckbox" label="促销管理" name="type"></el-checkbox>
											<el-checkbox class="tableCheckbox" label="商品分享" name="type"></el-checkbox>
										</el-checkbox-group>
									</el-form-item>
								</td>
							</tr>
							<tr>
								<td>客户</td>
								<td>
									<el-form-item prop="type" label="">
										<el-checkbox-group v-model="companyMsgData.type">
											<el-checkbox class="tableCheckbox" label="客户查看" name="type"></el-checkbox>
											<el-checkbox class="tableCheckbox" label="客户导出" name="type"></el-checkbox>
											<el-checkbox class="tableCheckbox" label="客户管理" name="type"></el-checkbox>
											<el-checkbox class="tableCheckbox" label="客户删除" name="type"></el-checkbox>
											<el-checkbox class="tableCheckbox" label="客户级别设置" name="type"></el-checkbox>
											<el-checkbox class="tableCheckbox" label="归属区域设置" name="type"></el-checkbox>
											<el-checkbox class="tableCheckbox" label="加盟信息管理" name="type"></el-checkbox>
											<el-checkbox class="tableCheckbox" label="反馈查看" name="type"></el-checkbox>
											<el-checkbox class="tableCheckbox" label="反馈回复" name="type"></el-checkbox>
											<el-checkbox class="tableCheckbox" label="反馈删除" name="type"></el-checkbox>
											<el-checkbox class="tableCheckbox" label="报价单查看" name="type"></el-checkbox>
										</el-checkbox-group>
									</el-form-item>
								</td>
							</tr>
							<tr>
								<td>资金</td>
								<td>
									<el-form-item prop="type" label="">
										<el-checkbox-group v-model="companyMsgData.type">
											<el-checkbox class="tableCheckbox" label="收款确认" name="type"></el-checkbox>
											<el-checkbox class="tableCheckbox" label="资金账户充值/导入" name="type"></el-checkbox>
											<el-checkbox class="tableCheckbox" label="资金账户扣款" name="type"></el-checkbox>
											<el-checkbox class="tableCheckbox" label="收款账户管理-在线支付" name="type"></el-checkbox>
											<el-checkbox class="tableCheckbox" label="收款账户管理-线下支付" name="type"></el-checkbox>
											<el-checkbox class="tableCheckbox" label="收支明细查看" name="type"></el-checkbox>
											<el-checkbox class="tableCheckbox" label="收支明细导出" name="type"></el-checkbox>
											<el-checkbox class="tableCheckbox" label="订单收款统计查看" name="type"></el-checkbox>
											<el-checkbox class="tableCheckbox" label="订单收款统计导出" name="type"></el-checkbox>
										</el-checkbox-group>
									</el-form-item>
								</td>
							</tr>
							<tr>
								<td>通知</td>
								<td>
									<el-form-item prop="type" label="">
										<el-checkbox-group v-model="companyMsgData.type">
											<el-checkbox class="tableCheckbox" label="广告发布管理" name="type"></el-checkbox>
											<el-checkbox class="tableCheckbox" label="通知管理" name="type"></el-checkbox>
											<el-checkbox class="tableCheckbox" label="通知分类管理" name="type"></el-checkbox>
											<el-checkbox class="tableCheckbox" label="短信充值" name="type"></el-checkbox>
											<el-checkbox class="tableCheckbox" label="短信发送设置" name="type"></el-checkbox>
										</el-checkbox-group>
									</el-form-item>
								</td>
							</tr>
							<tr>
								<td>报表</td>
								<td>
									<el-form-item prop="type" label="">
										<el-checkbox-group v-model="companyMsgData.type">
											<el-checkbox class="tableCheckbox" label="订单统计报表导出" name="type"></el-checkbox>
											<el-checkbox class="tableCheckbox" label="地区统计报表导出" name="type"></el-checkbox>
											<el-checkbox class="tableCheckbox" label="商品销售报表导出" name="type"></el-checkbox>
											<el-checkbox class="tableCheckbox" label="客户订货报表导出" name="type"></el-checkbox>
											<el-checkbox class="tableCheckbox" label="报表查看" name="type"></el-checkbox>
											<el-checkbox class="tableCheckbox" label="利润报表查看" name="type"></el-checkbox>
										</el-checkbox-group>
									</el-form-item>
								</td>
							</tr>
							<tr>
								<td>设置</td>
								<td>
									<el-form-item prop="type" label="">
										<el-checkbox-group v-model="companyMsgData.type">
											<el-checkbox class="tableCheckbox" label="我的账号" name="type"></el-checkbox>
											<el-checkbox class="tableCheckbox" label="公司信息" name="type"></el-checkbox>
											<el-checkbox class="tableCheckbox" label="系统设置" name="type"></el-checkbox>
											<el-checkbox class="tableCheckbox" label="业务流程设置" name="type"></el-checkbox>
											<el-checkbox class="tableCheckbox" label="订单审核区域变更" name="type"></el-checkbox>
											<el-checkbox class="tableCheckbox" label="部门管理" name="type"></el-checkbox>
											<el-checkbox class="tableCheckbox" label="账号权限管理" name="type"></el-checkbox>
											<el-checkbox class="tableCheckbox" label="操作日志" name="type"></el-checkbox>
											<el-checkbox class="tableCheckbox" label="应用中心设置" name="type"></el-checkbox>
										</el-checkbox-group>
									</el-form-item>
								</td>
							</tr>
							<tr>
								<td>辅助</td>
								<td>
									<el-form-item prop="type" label="">
										<el-checkbox-group v-model="companyMsgData.type">
											<el-checkbox class="tableCheckbox" disabled label="禁止查看商品价格与订单金额" name="type"></el-checkbox>
											<el-checkbox class="tableCheckbox" disabled label="查看商品成本价" name="type"></el-checkbox>
										</el-checkbox-group>
									</el-form-item>
								</td>
							</tr>
						</table>
						<div class="fixedBox">
							<el-button type="primary" class="fixedBtn">保存</el-button>
						</div>

					</el-form>
				</el-tab-pane>
			</el-tabs>

		</div>

	</section>
</template>

<script>
	export default {
		data() {
			return {
				fullTextFields:"",
				tableH:0,
				memberRole:[],
				modifyFormData: { //修改角色名称form数据
					accountNum: '',
					newPass: '',
					againPass: '',
				},
				rules1: { //修改角色名称form数据验证
					accountNum: [{
						required: true,
						message: '角色名称不能为空',
						trigger: 'blur'
					},{
						required: true,
						min:0,
						max:10,
						message: '角色名称不能大于十个字',
						trigger: 'blur'
					}],
					newPass: [{
						required: true,
						message: '请输入新密码',
						trigger: 'blur'
					}],
					againPass: [{
						required: true,
						message: '请重复新密码',
						trigger: 'blur'
					}],
				},
				allOrder: false, //全部部门下拉箭头旋转
				allState: false, //全部状态下拉箭头旋转
				slideBtnMsg: '全部部门', //全部部门默认
				slideBtnMsgState: '全部状态', //全部状态默认
				slideBtnMsgStateCode: '', //全部状态默认
				roleSetFromData: { //角色权限管理
					role: '',
				},
				modify: '', //修改角色名称
				companyMsgData: { //角色权限form数据
					type: [],
					name: "",
					valueData: '',
				},
				add: false, //新增部门下拉层
				update: false, //修改部门下拉层
				categoryParentCode: "", //新增部门点确定接受的参数
				deptCode: "", //修改部门点确定接受的参数
				activeName: "first", //默认table显示项
				expandTreeKeys: [], //部门tree属性
				addForm: { //增加部门下拉form数据
					department: '',
					parentDepartment: '',
					disabled: true,
					placeholder: "根类别"
				},
				updateForm: { //修改部门下拉层form数据
					department: '',
					parentDepartment: '',
					disabled: true,
					placeholder: ""
				},
				rules: { //修改部门、新增部门form验证
					department: [{
							required: true,
							message: '部门名称不能为空',
							trigger: 'blur'
						},
						{
							required: true,
							min: 0,
							max: 10,
							message: '部门名称不能超过十个字',
							trigger: 'blur'
						}
					],
					parentDepartment: [{}]
				},
				tree: [ //部门列表tree的data
					{
						treeCode: 1,
						treeName: '上海高达',
						children: [{
							treeCode: 3,
							treeName: '技术部',
							children: [{
								treeCode: 5,
								treeName: '研发部'
							}, {
								treeCode: 6,
								treeName: '运维部'
							}]
						}]
					}, {
						treeCode: 2,
						treeName: '杭州高达',
						children: [{
							treeCode: 4,
							treeName: '技术部',
							children: [{
								treeCode: 7,
								treeName: '一部'
							}, {
								treeCode: 8,
								treeName: '二部'
							}]
						}]
					}
				],
				defaultProps: { //部门列表tree属性
					children: 'children',
					label: 'treeName'
				},
				tableData: [], //员工账号table数据
				tiaosum: '0', //所有条数
				yema: 1, //当前页码
				yetiao: 10, //每页条数
				memberName: "", //搜索框通过账户名称进行搜索
				rechargeMoneySum: 0, //充值总金额
			}
		},
		methods: {
			iconQuery(){
				this.queryListOper(this.slideBtnMsgStateCode,this.fullTextFields)
			},
			setCookie(c_name, value, expiredays){
				var exdate=new Date();
				exdate.setDate(exdate.getDate() + expiredays);
				document.cookie=c_name+ "=" + escape(value) + ((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
			},
			getCookie(name){
				var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
				if(arr=document.cookie.match(reg)){
					return unescape(arr[2]);
				}else{
					return null;
				}
			},
			delCookie(name){
				var exp = new Date();
				exp.setTime(exp.getTime() - 1);
				var cval= this.getCookie(name);
				if(cval!=null)
				document.cookie= name + "="+cval+";expires="+exp.toGMTString();
			},
			//--------------点击下拉箭头关闭另一个下拉箭头   start-------------------
			departmentType() {
				this.allOrder = !this.allOrder;
				this.allState = false;
			},
			stateType() {
				this.allState = !this.allState;
				this.allOrder = false;
				console.log(this.slideBtnMsgStateCode)
			},
			//----------------禁用后行数变灰  start-----------------------------------
			disableStateBtn(rowData, index) {
				return rowData.dataBillstate == "1" ? "grayColor" : "";
			},

			//-------------------------修改角色名称   start---------------
			modifySure() {
				this.$refs.modifyFormData.validate((valid)=>{
					if(valid){
						this.axios({
							method:"post",
							url:"/admin/memberRoleAjax!update.htm",
							params:{
								"memberRoleViewVo.roleCode":this.roleSetFromData.role,
								"memberRoleViewVo.roleName":this.modifyFormData.accountNum
							}
						}).then((res)=>{
							if(res.data.state==res.data.success){
								this.openSuccess(res.data.msg);
								this.queryMemberRole();
								this.modify = false;
							}else{
								this.openError(res.data.msg);
							}
						}).catch((error)=>{
							//console.log(error.response.status)
						})
					}else{
						return false;
					}
				})
			},

			//--------------------------员工账号启用  start-----------------
			ableBtn(index, data) {
				const h = this.$createElement;
				this.$msgbox({
					title: '确认',
					message: h('div', {
						style: 'padding:20px;'
					}, [
						h('p', {
								style: 'text-align: center;font-size: 14px;color: #415161;text-align: center;line-height: 25px;margin-bottom: 8px;'
							},
							'是否确认启用该账号' + data[index].operatorAccount + '？'
						),
					], ),
					customClass: "surePay clearfixBox",
					cancelButtonClass: 'fr fontSize12',
					confirmButtonClass: 'fr fontSize12',
					showCancelButton: true,
					confirmButtonText: '确定',
					cancelButtonText: '取消',
				}).then(action => {
					if(action === 'confirm') {
						this.axios({
							method: 'post',
							url: "/admin/memberOperatorAjax!enablePlatOperator.htm",
							params: {
								"operatorCode": data[index].operatorCode,
							}
						}).then((res) => {

							if(res.data.state == res.data.success) {
								this.openSuccess(res.data.msg);
								this.queryListOper("");
							} else {
								this.openError(res.data.msg);
							}
						});

					}
				});
			},
			//--------------------------员工账号删除  start-----------------
			delBtn(index, data) {
				const h = this.$createElement;
				this.$msgbox({
					title: '确认',
					message: h('div', {
						style: 'padding:20px;'
					}, [
						h('p', {
								style: 'text-align: center;font-size: 14px;color: #415161;text-align: center;line-height: 25px;margin-bottom: 8px;'
							},
							'删除后账号不可恢复, 不可重建, 请谨慎操作! 是否确认删除？'
						),
					], ),
					customClass: "surePay clearfixBox",
					cancelButtonClass: 'fr fontSize12',
					confirmButtonClass: 'fr fontSize12',
					showCancelButton: true,
					confirmButtonText: '确定',
					cancelButtonText: '取消',
				}).then(action => {
					if(action === 'confirm') {
						this.axios({
							method: 'post',
							url: "/admin/memberOperatorAjax!deletePlatOperator.htm",
							params: {
								"operatorCode": data[index].operatorCode,
							}
						}).then((res) => {

							if(res.data.state == res.data.success) {
								this.openSuccess(res.data.msg);
								this.queryListOper("");
							} else {
								this.openError(res.data.msg);
							}
						});

					}
				});
			},

			modifyCancel() {
				this.modify = false;
				this.$refs.modifyFormData.resetFields()
			},

			//--------------------------员工账号禁用  start-----------------
			disableBtn(index, data) {
				const h = this.$createElement;
				this.$msgbox({
					title: '确认',
					message: h('div', {
						style: 'padding:20px;'
					}, [
						h('p', {
								style: 'text-align: center;font-size: 14px;color: #415161;text-align: center;line-height: 25px;margin-bottom: 8px;'
							},
							'是否确认禁用该账号' + data[index].operatorAccount + '？'
						),
					], ),
					customClass: "surePay clearfixBox",
					cancelButtonClass: 'fr fontSize12',
					confirmButtonClass: 'fr fontSize12',
					showCancelButton: true,
					confirmButtonText: '确定',
					cancelButtonText: '取消',
				}).then(action => {
					if(action === 'confirm') {
						this.axios({
							method: 'post',
							url: "/admin/memberOperatorAjax!disablePlatOperator.htm",
							params: {
								"operatorCode": data[index].operatorCode,
							}
						}).then((res) => {

							if(res.data.state == res.data.success) {
								this.openSuccess(res.data.msg);
								this.queryListOper("");
							} else {
								this.openError(res.data.msg);
							}
						});

					}
				});
			},

			//----------------------修改员工账号  start--------------
			modifyBtn(index, data) {
				this.setCookie("operatorCode",data[index].operatorCode,1)				
				this.$router.push('/set/modifyAccount')
			},

			//----------------------新增员工账号  start-------------
			addNewAccount() {
				this.$router.push('/set/addNewAccount')
			},

			//---------------------------下拉箭头   start----------
			handleCommand: function(command) {
				this.slideBtnMsg = command;
				this.allOrder = false;
			},
			handleCommandState: function(command) {
				this.slideBtnMsgState = command;
				this.fullTextFields = "";
				this.allState = false;
				if("全部状态"==command){
					this.slideBtnMsgStateCode = ""
				}else if("启用"==command){
					this.slideBtnMsgStateCode = "0"
				}else if("停用"==command){
					this.slideBtnMsgStateCode = "1"
				}
				this.queryListOper(this.slideBtnMsgStateCode);
			},

			//---------------部门列表tree的key   start------------
			addKey(data, node, dom) {
				this.expandTreeKeys.push(node.key)
			},

			//--------------部门列表tree的deleteKey  start---------
			deleteKey(data, node, dom) {
				for(var i = 0; i < this.expandTreeKeys.length; i++) {
					if(this.expandTreeKeys[i] == node.key) {
						this.expandTreeKeys.splice(i, 1);
						break;
					}
				}
			},

			updateOk(code) {
				this.$refs.updateDepartment.validate((valid) => {
					if(valid) {
						this.axios({
							method: 'post',
							url: "/admin/memberDeptAjax!update.htm",
							params: {
								"memberDeptViewVo.deptName": this.updateForm.department,
								"memberDeptViewVo.deptCode": code
							}
						}).then((res) => {
							if(res.data.state == res.data.success) {
								this.axios({
									method: 'post',
									url: "/admin/memberDeptAjax!queryTree.htm"
								}).then((res) => {
									if(res.data.state == res.data.success) {
										this.tree = res.data.treeList;
									} else {
										//alert(res.data.msg);
									}
								});
								this.update = false;
								this.$refs.updateDepartment.resetFields();
								this.openSuccess(res.data.msg);
							} else {
								//alert(res.data.msg);
							}
						});
					} else {
						this.openError('品牌名称不能为空');
						return false;
					}
				})
			},
			updateCancel() {
				this.update = false;
				this.$refs.updateDepartment.resetFields();
			},
			//---------------右上角成功提示   start---------------
			openSuccess(msg) {
				this.$notify({
					message: msg,
					type: 'success',
					duration: 3000
				});
			},

			//----------------右上角失败提示  start---------------
			openError(msg) {
				this.$notify({
					message: msg,
					type: 'error',
					duration: 3000
				});
			},

			addDep() {
				this.add = true;
				this.addForm.placeholder = "根类别";
				this.categoryParentCode = "-1";
			},
			addChildren(data) {
				this.categoryParentCode = data.treeCode;
				this.addForm.placeholder = data.treeName;
				this.add = true;
			},
			updateFn(node, data) {
				if("-1" == data.treeParentCode) {
					this.updateForm.placeholder = "根类别";
				} else {
					this.updateForm.placeholder = node.parent.label;
				}
				this.deptCode = data.treeCode;
				this.updateForm.department = data.treeName;
				this.update = true;
			},
			stickFn(data) {
				this.axios({
					method: 'post',
					url: "/admin/memberDeptAjax!stick.htm",
					params: {
						"deptCode": data.treeCode
					}
				}).then((res) => {
					if(res.data.state == res.data.success) {
						this.axios({
							method: 'post',
							url: "/admin/memberDeptAjax!queryTree.htm"
						}).then((res) => {
							if(res.data.state == res.data.success) {
								this.tree = res.data.treeList;
							} else {
								//alert(res.data.msg);
							}
						});
						this.openSuccess(res.data.msg)
					} else {
						//alert(res.data.msg);
					}
				});
			},
			deleteFn(data) {
				if("0" != data.hasChildren) {
					//可删除
					this.$confirm('确认删除此部门？', '确认', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						cancelButtonClass: "fr",
						confirmButtonClass: "fr",
						customClass: "clearfixBox"
					}).then(() => {
						//点击确定的回调
						this.axios({
							method: 'post',
							url: '/admin/memberDeptAjax!delete.htm',
							params: {
								"deptCode": data.treeCode
							}
						}).then((res) => {
							if(res.data.state == res.data.success) {
								this.axios({
									method: 'post',
									url: "/admin/memberDeptAjax!queryTree.htm"
								}).then((res) => {
									if(res.data.state == res.data.success) {
										this.tree = res.data.treeList;
									} else {
										//alert(res.data.msg);
									}
								});
								this.openSuccess(res.data.msg)
							} else {
								this.openError(res.data.msg)
							}
						});
					}).catch(() => {
						//点击取消的回调
					});
				} else {
					//不可删除
				}
			},
			addOk(parentCode) {
				this.$refs.addDepartment.validate((valid) => {
					if(valid) {
						this.axios({
							method: 'post',
							url: "/admin/memberDeptAjax!save.htm",
							params: {
								"memberDeptViewVo.deptName": this.addForm.department,
								"memberDeptViewVo.deptParentCode": parentCode
							}
						}).then((res) => {
							if(res.data.state == res.data.success) {
								this.axios({
									method: 'post',
									url: "/admin/memberDeptAjax!queryTree.htm"
								}).then((res) => {
									if(res.data.state == res.data.success) {
										this.tree = res.data.treeList;
									} else {
										//alert(res.data.msg);
									}
								});
								this.add = false;
								this.$refs.addDepartment.resetFields();
								this.openSuccess(res.data.msg);
							} else {
								this.add = false;
								this.$refs.addDepartment.resetFields();
								this.openError(res.data.msg)
							}
						});
					} else {
						return false;
					}
				})
			},
			addCancel() {
				this.add = false;
				this.$refs.addDepartment.resetFields();
			},
			treeConentFn(createElement, {
				node,
				data,
				store
			}) {
				var _this = this;
				return createElement('span', [
					createElement('span', node.label),
					createElement('span', {
						attrs: {
							class: "btnSpan fr"
						}
					}, [
						createElement('span', {
							attrs: {
								class: ""
							},
							on: {
								click: function(e) {
									var e = e || event;
									e.stopPropagation();
									_this.addChildren(data);
								}
							}
						}, [
							createElement('span', {
								attrs: {
									class: "iconfont addChildrenIcon"
								}
							}, ''),
							createElement('span', {
								attrs: {
									class: ""
								}
							}, '新增子类')
						]),
						createElement('span', {
							attrs: {
								class: ""
							},
							on: {
								click: function(e) {
									var e = e || event;
									e.stopPropagation();
									_this.updateFn(node, data);
								}
							}
						}, [
							createElement('span', {
								attrs: {
									class: "iconfont updateIcon"
								}
							}, ''),
							createElement('span', {
								attrs: {
									class: ""
								}
							}, '修改')
						]),
						createElement('span', {
							attrs: {
								class: ""
							},
							on: {
								click: function(e) {
									var e = e || event;
									e.stopPropagation();
									_this.stickFn(data);
								}
							}
						}, [
							createElement('span', {
								attrs: {
									class: "iconfont stickIcon"
								}
							}, ''),
							createElement('span', {
								attrs: {
									class: ""
								}
							}, '置顶')
						]),
						createElement('span', {
							attrs: {
								class: ""
							},
							on: {
								click: function(e) {
									var e = e || event;
									e.stopPropagation();
									_this.deleteFn(data);
								}
							},
							"class": {
								"noActive": data.hasChildren - 1
							}
						}, [
							createElement('span', {
								attrs: {
									class: "iconfont deleteIcon"
								}
							}, ''),
							createElement('span', {
								attrs: {
									class: ""
								}
							}, '删除')
						])
					])
				])
			},
			iconTextFn(objClassName, text) {
				let i = 0,
					Dobj = document.getElementsByClassName(objClassName);
				for(; i < Dobj.length; i++) {
					Dobj[i].innerHTML = text;
				};
			},
			//---------------------------分页     start--------------------
			handleSizeChange(val) {
				this.yetiao = val;
				this.axios({
					method: 'post',
					url: "/admin/memberOperatorAjax!queryPlatOperatorByPage.htm",
					params: {
						"limit": val,
						"offset": (this.yema - 1) * this.yetiao,
					}
				}).then((res) => {
					if(res.data.state == res.data.success) {
						this.tableData = res.data.memberOperatorViewVoList;
						this.tiaosum = res.data.page.recordCount;
						this.yema = res.data.page.pageNo;
						this.yetiao = res.data.page.pageSize;
					}
				});
			},
			handleCurrentChange(val) {
				this.yema = val;
				this.axios({
					method: 'post',
					url: "/admin/memberOperatorAjax!queryPlatOperatorByPage.htm",
					params: {
						"limit": this.yetiao,
						"offset": (this.yema - 1) * this.yetiao,
					}
				}).then((res) => {
					if(res.data.state == res.data.success) {
						this.tableData = res.data.memberOperatorViewVoList;
						this.tiaosum = res.data.page.recordCount;
						this.yema = res.data.page.pageNo;
						this.yetiao = res.data.page.pageSize;
					}
				});
			},
			queryByMemberName() {
				this.axios({
					method: 'post',
					url: "/admin/memberOperatorAjax!queryPlatOperatorByPage.htm",
					params: {
						"limit": this.yetiao,
						"offset": (this.yema - 1) * this.yetiao,
					}
				}).then((res) => {
					if(res.data.state == res.data.success) {
						this.tableData = res.data.memberOperatorViewVoList;
						this.tiaosum = res.data.page.recordCount;
						this.yema = res.data.page.pageNo;
						this.yetiao = res.data.page.pageSize;
					}
				});
			},
			//-------------------进入页面时刷新列表   start-----------------
			queryListOper(state) {
				this.axios({
					method: 'post',
					url: "/admin/memberOperatorAjax!queryPlatOperatorByPage.htm",
					params: {
						"limit": this.yetiao,
						"offset": (this.yema - 1) * this.yetiao,
						"memberOperatorViewVo.dataBillstate":state,
						"fullTextFields": this.fullTextFields
					}
				}).then((res) => {
					if(res.data.state == res.data.success) {
						this.tableData = res.data.memberOperatorViewVoList;
						this.tiaosum = res.data.page.recordCount;
						this.yema = res.data.page.pageNo;
						this.yetiao = res.data.page.pageSize;
					} else {
						//alert(res.data.msg)
					}
				})
			},
		  memberRoleFn(data){
		  	this.memberRole.forEach((item,index,arr)=>{
		  		if(item.roleCode==data)this.modifyFormData.accountNum = item.roleName;
		  	})
		  },
		  queryMemberRole(){
		  	this.axios({
					method:"post",
					url:"/admin/memberRoleAjax!queryAll.htm"
				}).then((res)=>{
					if(res.data.state==res.data.success){
						this.memberRole = res.data.memberRoleViewVoList;
					}else{
						this.openError(res.data.msg)
					}
				}).catch((error)=>{
					//console.log(error.response.status)
				})
		  }
		},
		created(){
			/* start 请求角色信息 */
			this.queryMemberRole();
			/* end 请求角色信息 */
		},
		mounted() {
			this.axios({
				method: 'post',
				url: "/admin/memberDeptAjax!queryTree.htm"
			}).then((res) => {
				if(res.data.state == res.data.success) {
					this.tree = res.data.treeList;
				} else {
					//alert(res.data.msg);
				}
			});
			this.iconTextFn("addChildrenIcon", "&#xec52;");
			this.iconTextFn("updateIcon", "&#xe617;");
			this.iconTextFn("stickIcon", "&#xe663;");
			this.iconTextFn("deleteIcon", "&#xec50;");

			//--------------翻页查询会员账号   start--------------
			this.queryListOper("");

			document.querySelector(".borderBottom").style.height = (document.documentElement.clientHeight - 230) + 'px';
			document.querySelector(".jurisdictionWrap").style.height = (document.documentElement.clientHeight - 190) + 'px';
			this.tableH = document.documentElement.clientHeight - 250;
			//---------------------------点击下拉箭头旋转---------------------------
			document.querySelector('body').onclick = () => {
				if(this.allOrder == true) {
					this.allOrder = false;
				}
			};
		},
		updated() {
			this.iconTextFn("addChildrenIcon", "&#xec52;");
			this.iconTextFn("updateIcon", "&#xe617;");
			this.iconTextFn("stickIcon", "&#xe663;");
			this.iconTextFn("deleteIcon", "&#xec50;");
		}
	};
</script>

<style scoped>
	.contentWrap .block {
		float: right;
		margin-top: 10px;
	}
	
	.goTo:hover {
		color: #13c19f;
		cursor: pointer;
	}
	
	.modifyHover:hover {
		color: #13c19f;
		cursor: pointer;
	}
	
	.wInput {
		width: 384px;
	}
	
	.height-s-con {
		position: absolute;
		width: 100%;
		height: 220px;
		top: 0;
		left: 0;
		padding: 30px;
		z-index: 1005;
		background: #fff;
		box-sizing: border-box;
		box-shadow: 0 0 10px #ccc;
		overflow: hidden;
	}
	
	.search-title {
		font-size: 16px;
		border: 0;
		color: #415161;
		margin-bottom: 20px;
	}
	
	.fade-enter-active,
	.fade-leave-active {
		transition: .4s;
	}
	
	.fade-enter,
	.fade-leave-active {
		opacity: 0;
	}
	
	.slideDown-enter-active,
	.slideDown-leave-active {
		transition: .4s;
	}
	
	.slideDown-enter,
	.slideDown-leave-active {
		opacity: 0;
	}
	
	.fixedBox {
		bottom: 10px;
		position: fixed;
		width: 87%;
		background: #fff;
		height: 45px;
		line-height: 45px;
		z-index: 10;
	}
	
	.fixedBtn {
		color: #fff !important;
		background: #13C19F !important;
		z-index: 100;
		cursor: pointer;
		border: 0;
	}
	
	.tipsLeft {
		font-size: 14px;
	}
	
	.tableCheckbox {
		width: 205px;
		margin-right: 0px !important;
		height: 20px !important;
		line-height: 20px !important;
	}
	
	.el-checkbox {
		margin-left: 0px !important;
		margin-right: 15px;
	}
	
	.addAccount {
		border: 1px solid #e7e9f1;
		margin-top: 20px;
		width: 100%;
	}
	
	.addAccount tr td {
		padding: 4px 8px;
		border-bottom: 1px solid #e7e9f1;
	}
	
	.addAccount tr td:first-child {
		width: 100px;
		text-align: center;
		background: #eff1f8;
	}
	
	.sayTips {
		line-height: 25px;
		color: rgb(147, 166, 183);
	}
	
	.title {
		margin: 30px 0px 15px 0px;
		font-size: 14px;
	}
	
	.p {
		text-indent: 10px;
		line-height: 30px;
		cursor: pointer;
	}
	
	.p em {
		position: relative;
		top: 2px;
		margin-right: 3px;
	}
	
	.p:hover {
		background: #eef1f9;
		color: #03B8CC;
	}
	
	.borderBottom {
		overflow-y: auto;
	}
	
	.goods-input i {
		background: url(../../../img/sousuo.png) no-repeat;
		height: 20px;
		width: 20px;
		display: inline-block;
		position: relative;
		top: 3px;
		right: 5px;
		cursor: pointer;
	}
	
	.goods-input:hover {
		border-color: #13C19F;
		transition: 1s;
	}
	
	.goods-input {
		float: left;
		width: 340px;
		border: 1px solid #cdd9e6;
		border-radius: 4px;
		margin-right: 10px;
		height: 34px;
		cursor: pointer;
	}
	
	.goods-input input {
		display: block;
		float: left;
		width: 290px;
		height: 34px;
		font-size: 12px;
		border: 0;
		margin-left: 20px;
	}
	
	.slideBtn {
		line-height: 36px;
		margin-right: 26px;
	}
	
	.slideBtn div span {
		cursor: pointer;
		display: block;
	}
	
	.slideBtn div {
		font-size: 12px;
	}
	
	.slideBtnIcon {
		transition: .4s;
	}
	
	.slideBtnIcon.up {
		transform: rotate(-180deg);
	}
	
	.employNum-heard {
		padding-top: 10px;
		height: 36px;
		line-height: 36px;
		margin-bottom: 10px;
		padding-left: 16px;
	}
	
	section {
		display: flex;
		flex-direction: column;
		flex: 1;
	}
	
	div.location {
		flex: 0 0 10px;
		padding: 3px 0 15px 0;
	}
	
	div.content {
		flex: 1;
		padding: 0px 20px 10px;
		background-color: #fff;
		position: relative;
	}
	
	.grid-content {
		height: 50px;
		line-height: 50px;
	}
	
	.wrapUl>li:not(.noWrapUl) {
		width: 100%;
		height: 50px;
		line-height: 50px;
		border-bottom: 1px solid #e6ecf2;
		transition: .2s;
		background-color: #fff;
	}
	
	div.content ul.active li {
		width: 100%;
		height: 50px;
		line-height: 50px;
		border-bottom: 1px solid #e6ecf2;
		transition: .2s;
		background-color: #fff;
	}
	
	div.content ul.active {
		overflow-y: auto;
	}
	
	div.content ul.active li:hover {
		background-color: #F5F7FC;
	}
	
	div.content ul.active li:hover div.setBox {
		display: block;
	}
	
	div.content ul.active li div.setBox {
		display: none;
		padding-right: 10px;
	}
	
	li p {
		padding-left: 20px;
	}
	
	.textR {
		text-align: right;
	}
	
	.font12 {
		font-size: 12px;
	}
	/* start add */
	
	.modal-backdrop {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 80;
		background-color: rgba(240, 240, 240, 0.2);
		/*background-color: rgba(0, 0, 0, .2);*/
	}
	
	.specific-search {
		position: absolute;
		width: 100%;
		top: 0;
		left: 0;
		padding: 30px;
		z-index: 1005;
		background: #fff;
		box-sizing: border-box;
		box-shadow: 0 0 10px #ccc;
	}
	
	.search-title {
		font-size: 16px;
		border: 0;
		color: #415161;
	}
	
	.form {
		width: 1000px;
		background: #fff;
		margin: 20px 0;
	}
	
	.search-btn {
		margin-top: 50px;
	}
	
	.specific-search {
		height: 260px;
	}
	/* end add */
	
	.fade-enter-active,
	.fade-leave-active {
		transition: .4s;
	}
	
	.fade-enter,
	.fade-leave-active {
		opacity: 0;
	}
	
	.slideDown-enter-active,
	.slideDown-leave-active {
		transition: .4s;
	}
	
	.slideDown-enter,
	.slideDown-leave-active {
		/*height: 0;*/
		opacity: 0;
	}
	
	div.content ul li.title {
		font-size: 14px;
		background-color: #EEF1F9;
	}
	/* start 角色权限样式 */
	.jurisdictionWrap{
		overflow-y: auto;
		overflow-x: hidden;
	}
	/* end 角色权限 */
</style>